  <!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 09:06:50
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-14 22:44:32
 * @FilePath: \company-world\src\views\homepage\index.vue
 * @Description: 增加/修改菜单右侧
-->
<template>
  <div>
    <el-form ref="ruleFormRef" :model="fomData" status-icon class="form-option">
      <h4>上级菜单</h4>
      <el-form-item>
        <el-select v-model="form.parent_name" placeholder="请选择" class="form-input">
          <el-option label="区域一" value="0" class="form-option">
            <el-tree
              ref="tree"
              :data="parentData"
              default-expand-all
              node-key="id"
              @node-click="handleNodeClick"
              :props="form.defaultProps"
            />
          </el-option>
        </el-select>
      </el-form-item>
      <h4>图标</h4>
      <el-form-item>
        <el-select :value="other" class="form-input" placeholder="请选择">
          <template #prefix>
            <div class="input-icon">
              <el-icon class="icon" v-if="form.icon && form.icon === form.icon.toUpperCase()">
                <template #default>
                  <component :is="form.icon"> </component>
                </template>
              </el-icon>
              <i :class="'iconfont ' + form.icon" class="icon"></i>
            </div>
          </template>
          <template #empty>
            <div class="choose-color">
              <div
                class="icon-select"
                id="icons"
                v-for="(icon, index) in iconList"
                :key="index"
                @click="checkIcon(icon)"
              >
                <el-icon class="icon" v-if="icon && icon === icon.toUpperCase()"
                  ><template #default><component :is="icon"></component></template
                ></el-icon>
                <i v-else class="icon" :class="'iconfont ' + icon"></i>
              </div>
            </div>
          </template>
        </el-select>
      </el-form-item>
      <h4>备注</h4>
      <el-form-item prop="desc">
        <el-input v-model="form.menu_remarks" type="textarea" />
      </el-form-item>
    </el-form>
    <h4>是否显示</h4>
    <el-form-item prop="is_show">
      <el-radio-group v-model="form.is_show">
        <el-radio-button label="1">显示</el-radio-button>
        <el-radio-button label="0">隐藏</el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, computed, defineExpose, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getPageList } from '@/apis/system/system'
import { getDepartmentList } from '@/apis/system/department'
import { ItagsData, Issues } from '@/views/issues/config/issues'
import { getTagsList } from '@/apis/issues/issues-tags'
// import { store } from '@/store/issues'
// import { storeToRefs } from 'pinia'
import { Itype } from '@/type/index'
import { elementIcons } from '@/utils/icons'
const props = defineProps({
  // 表单数据
  form: {
    type: Object,
    required: true,
    default: () => {}
  },
  // 上级菜单
  parentData: {
    type: Object,
    required: true,
    default: () => {}
  }
})
const fomData = ref()
watch(
  () => props.form,
  (newVal) => {
    fomData.value = newVal
  },
  { immediate: true }
)
const other = ref('')
const baseUrl = 'https://dwh_api.bimcc.net'
const state = reactive({
  preloadAvatar: [],
  loading: false
})
// const issueStore = store()
// const { userList } = storeToRefs(issueStore)
const menuSort = reactive([
  {
    value: '通知',
    label: '通知'
  },
  {
    value: '公告',
    label: '公告'
  }
])
/**
 * @desc:获取图标
 */
const iconList = ref([''])
iconList.value = JSON.parse(JSON.stringify(elementIcons))
/**
 * @desc:对象转数组
 */
// let userLists: Itype = userList.value
// let arrs: Itype = ref([])
// Object.keys(userLists).forEach(function (key: string) {
//   if (arrs.value && arrs.length) {
//     arrs.value.push({
//       value: key,
//       label: userLists[key]
//     })
//   }
// })
/**
 * @desc:获取点击icon
 */
const checkIcon = (data: string) => {
  props.form.icon = data
}
/**
 * @desc: 增加标签
 */
const emit = defineEmits(['send-tagsDialog'])
const addTags = () => {
  emit('send-tagsDialog')
}
/**
 * 获取tags数据
 */
// const tagsListData = ref<ItagsData[]>()
// const getData = () => {
//   let params = {}
//   getTagsList(params)
//     .then((res) => {
//       if (res.data && res.code !== 200) return
//       tagsListData.value = res.data.data
//     })
//     .catch(() => {
//       ElMessage('服务器内部错误')
//     })
// }
// getData()
// 优先级
const optPriority = [
  {
    value: '紧急且重要',
    label: '紧急且重要',
    iconColor: '#B0B0B0'
  },
  {
    value: '重要但不紧急',
    label: '重要但不紧急',
    iconColor: '#EF0016'
  },
  {
    value: '紧急但不重要',
    label: '紧急但不重要',
    iconColor: '#FF8F00'
  },
  {
    value: '不紧急也不重要',
    label: '不紧急也不重要',
    iconColor: '#008AFF'
  }
]
/**
 * @desc:获取人员信息
 * @param {Array} search 搜索
 */
// const loading = ref(false)
// let pager = ref({
//   page: 1,
//   size: 10,
//   total: 0
// })
// let peopleList = ref()
// let search = ref<object[]>()
// const getPeople = () => {
//   loading.value = true
//   let params = {
//     page: pager.value.page,
//     size: pager.value.size,
//     search: search?.value
//   }
//   getPageList(params)
//     .then((res) => {
//       if (res.data && res.code !== 200) return
//       pager.value = {
//         page: res.data.current_page,
//         size: res.data.per_page,
//         total: res.data.total
//       }
//       let arr: any = []
//       res.data?.data.map((item: { connect: [''] }) => {
//         if (!item.connect[0]) return
//         arr.push(item.connect[0])
//       })
//       peopleList.value = arr
//       loading.value = false
//     })
//     .catch((res) => {
//       ElMessage('服务器内部错误')
//     })
// }
// getPeople()
/**
 * @desc:获取下拉父级id
 */
interface ImenuList {
  id: number
  name: string
}
const handleNodeClick = (row: ImenuList) => {
  const { id, name } = row
  props.form.parent_id = id
  props.form.parent_name = name
}
</script>

<style lang="less" scoped>
.right-content {
  overflow-y: auto;
}
.choose-color {
  overflow: auto;
  width: 287px;
  height: 300px;
  margin: 0;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  z-index: 999;
  .icon-select {
    display: inline-block;
    width: 40px;
    .colorBoard {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }
  }
}
.form-option {
  height: auto !important;
  background-color: #fff !important;
}
h4 {
  padding-bottom: 20px;
}
.block {
  :deep(.el-range-editor.el-input__wrapper) {
    width: 92%;
  }
}
</style>
